<template>
    <div>
      <NavigationBar navtitle="钱包明细" @navEvent="navEvent"></NavigationBar>
      <div style="margin: 30px 140px">
        <el-form :inline="true" :model="dataForm" >
            <el-form-item>
                <el-date-picker v-model="dateArr" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
                value-format='yyyy-MM-dd HH:mm:ss'>
                </el-date-picker>
            </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
          <el-button type="primary" @click="resetting()">重置</el-button>
          <!-- <el-button v-if="isAuth('course:coursetype:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> -->
        </el-form-item>
        <el-form-item>
            <el-button @click="exportFun()" type="primary">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column  prop="account"  header-align="center" align="center" label="账号"></el-table-column>
        <el-table-column prop="orderTime" header-align="center" align="center" label="收支时间">
          <template slot-scope="scope">
            <span>{{ scope.row.orderTime?getStrTime(scope.row.orderTime):"" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" header-align="center" align="center" label="类型">
          <template slot-scope="scope">
            <span>{{scope.row.type==1?'支出':'收入'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="money" header-align="center" align="center" label="金额"></el-table-column> 
        <el-table-column prop="balance" header-align="center" align="center" label="钱包余额"></el-table-column>
        <el-table-column prop="remark" header-align="center" align="center" label="备注"></el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    components: {
      NavigationBar: () => import('../../components/navigationBar/index.vue'),
    },
    data () {
      return {
        dataForm:{},
        eIndex: '',
        isdisabled: false,
        uploadVisible: false,
        typeList: [],
        typeLists: [],
        dateArr:[],
        ruleForm: {
          activityFlag: 0,
          categoryId: '',
          categoryIds: '',
          content: '',
          publicTime: '',
          banner: '',
          status: 1,
          title: '',
          matchName: '',
          recommend: 0,
          messageScore: '',
          viewInitCount: '',
          matchTime: '',
          teamOne: '',
          teamTwo: '',
          teamOnePic: '',
          teamTwoPic: ''
        },
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        id: '',
        rules: {
          title: [{ required: true, message: '请填写标题', trigger: 'blur' }],
          banner: [{ required: true, message: '请上传图片', trigger: 'blur' }],
          content: [{ required: true, message: '请填写内容', trigger: 'blur' }]
        },
        // headers:{}
        uploadAction: '',
        imageUrl: ''
  
      }
    },
    activated () {
        this.id = this.$route.query.id
    },
    created () {
      this.id = this.$route.query.id
      this.getDataList()
      this.getDataDetails()
      // this.goodsTagList()
      this.getCategory()
      // if(this.$route.query.id){
      //   this.getDataDetails()
      // }
    },
    mounted () {
      this.ue = ueditor.getEditor(this.ueId, {
        // serverUrl: '', // 服务器统一请求接口路径
        zIndex: 3000
      })
    },
    methods: {
      setlectType () {
        this.typeList.forEach((item, index) => {
          if (item.id == this.ruleForm.categoryId[0]) {
            this.typeLists = item.childs
          }
        })
      },
      getCategory () {
        this.$http({
          url: this.$http.adornUrl(`/common/back/category/list`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === '200') {
            let list = data.list
            list.forEach((item, index) => {
              item.label = item.categoryName
              item.value = item.id
              item.childs.forEach((i, x) => {
                i.label = i.categoryName
                i.value = i.id
              })
              // item.children = item.goodsTagList
            })
            this.typeList = list
          }
        })
      },
      exportFun () {
      const params = {
        id:this.id,
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
      }
      if (this.dateArr && this.dateArr.length > 0) {
        params.startTime = this.dateArr[0]
        params.endTime = this.dateArr[1]
      }
      window.open('http://47.76.166.148:8999/dgy/v1/admin/business/balance/log/export?id=' + (params.id || '') + '&startTime=' + (params.startTime || '') + '&endTime=' + (params.endTime || ''))
    },
    resetting(){
        this.dateArr=[]
        this.getDataList()
    },
       // 获取数据列表
       getDataList () {
        this.$http({
          url: this.$http.adornUrl(`/admin/business/balance/log/page`),
          method: 'post',
          data: this.$http.adornData({
            id:this.id,
            pageNum: this.pageIndex,
            pageSize: this.pageSize,
            startTime:this.dateArr.length > 0?this.dateArr[0]:"",
            endTime:this.dateArr.length > 0?this.dateArr[1]:""
          })
        }).then(({ data }) => {
          if (data && data.code === '200') {
            this.dataList = data.list
            this.totalPage = data.total
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      navEvent () {
        this.$router.push({ name: 'm-wallet' })
      }
    }
  }
  </script>
  
  <style lang="scss">
  .ql-editor {
    max-height: 320px !important;
  }
  
  .ztCont {
    display: flex;
  
    .dwnr {
      display: flex;
  
      .el-button {
        margin: 0 10px;
      }
  
      span {
        margin-left: 10px;
      }
  
      .Avatars {
        margin: 0 10px;
        width: 40px;
        height: 40px;
      }
    }
  }
  
  .Avatars {
    width: 100px;
    height: 100px;
  }
  
  .el-scrollbar__wrap {
    overflow: auto !important;
    margin-bottom: 0px !important;
    margin-right: 0px !important;
    height: 100% !important;
  }
  
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  
  .mod-demo-ueditor {
    position: relative;
    z-index: 510;
  
    >.el-alert {
      margin-bottom: 10px;
    }
  }</style>